<script setup>
import { ref } from 'vue'
import PageContainer from '@/components/PageContainer.vue'
import { CloseBold } from '@element-plus/icons-vue'
import { CourseGetInfoService, CourseDelService } from '@/api/CourseManage.js'

const Courselist = ref([])

const form = ref({
  id: '',
  className: '',
  teacher: '',
  room: '',
  capacity: ''
})


const getCourselist = async () => {
  const res = await CourseGetInfoService()
  Courselist.value = res.data.data
}

getCourselist()


const onDel = async (row) => {
  console.log(row.id)
  form.value = row
  await CourseDelService(form.value)
  alert('课程已被删除')
  getCourselist()
}
</script>

<template>
  <page-container title="删除课程信息">
    <el-table :data="Courselist" style="width: 100%">
      <!--这个type="index"加上默认就有序号了-->
      <el-table-column label="课程编号" width="200" prop="id"></el-table-column>
      <el-table-column label="课程名称" prop="className"></el-table-column>
      <el-table-column label="授课老师" prop="teacher"></el-table-column>
      <el-table-column label="授课教室" prop="room"></el-table-column>
      <el-table-column label="教室容量" prop="capacity"> </el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button
            :icon="CloseBold"
            circle
            plain
            type="danger"
            @click="onDel(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </page-container>
</template>

<style lang="scss" scoped></style>
